<template>
	<view class="gridIndex">
		<view class="indexTop">
			<view class="topBut">
				<view class="topButlist" @click="toTaskManagement">
					<img src="../../static/imgs/icon1.png" >
					<span>任务管理</span>
				</view>
				<view class="topButlist" @click="totaskDistribution">
					<img src="../../static/imgs/icon2.png" >
					<span>一周一巡查</span>
				</view>
				<view class="topButlist" @click="topatrolFeedback">
					<img src="../../static/imgs/icon1.png" >
					<span>重点区域<br>巡查反馈</span>
				</view>
			</view>
		</view>
		<view class="subheading">
			<img src="../../static/imgs/tip.png" >
			已接收任务
		</view>
		<view class="content">
			
			<view class="contentList" v-for="item in dataList" @click="toDetails(item.id)">
				<view class="contentListTop">
					<view class="contentListtitle">
					{{item.title}}
					</view>
					<view class="contentListstate">
						<span style="background: #d9001b;" v-if="item.state == '1'">待接收</span>
						<span style="background: #fe7a21;" v-else-if="item.state == '2'">待完成</span>
						<span style="background: #137a29;" v-else>已完成</span>
					</view>
				</view>
				<view class="contentListTime">
					事发时间：{{item.time}}
				</view>
			</view>
		</view>
		<view v-if="showdialog" class="showDialog">
			<view class="boxWc">
				<view class="notification">
					<view class="notificationText">{{showText}}</view>
					<view class="notificationBut">
						<span @click="hideDialog">确定</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		components: {
		},
		data() {
			return {
				showdialog:true,
				showText:'您有一条任务待接收，请及时查看',
				dataList:[
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
				]
			};
		},
		computed: {
			...mapGetters(['tabBar', "hasLogin"]),
		},
		onLoad() {},
		onUnload() {},
		onShow() {},
		methods: {
			toTaskManagement(){
				wx.navigateTo({
				  url: '/pages/gridEnd/taskManagement'
				})
			},
			totaskDistribution(){
				wx.navigateTo({
				  url: '/pages/gridEnd/taskDistribution'
				})
			},
			topatrolFeedback(){
				wx.navigateTo({
				  url: '/pages/gridEnd/patrolFeedback'
				})
			},
			toDetails(id){
				uni.navigateTo({
				  url: '/pages/policeEnd/details',
				  success: function(res) {
				    uni.$emit('eventName', { uid: id }); 
				  }
				});
			},
			showTipDialong(){
				this.showTipDialong()
			},
			hideDialog(){
				this.showdialog = false
			}
		}
	}
</script>

<style lang="scss">
	.gridIndex{height: 100vh;}
	.indexTop{width: 100%; height: 350rpx; background: url('../../static/imgs/headbg.png') no-repeat; background-size: 100% 100%; position: relative;
		.topBut{position: absolute;bottom: -25rpx; margin-left: 25rpx; padding-top: 6%; display: flex; background: #ffffff; width: calc(100% - 50rpx); height: 190rpx;   border-radius: 20rpx;
			.topButlist{width: 33.3%; text-align: center;
				img{width: 110rpx; height: 110rpx;}
				span{margin-top: 15rpx; display: block; font-size: 30rpx;}
			}
			.topButlist:nth-child(2),.topButlist:nth-child(1){
				span{margin-top: 35rpx;}
			}
		}
	}
	.subheading{margin-top: 100rpx; position: relative; padding-left: 20rpx; font-size: 33rpx; font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-weight: 650; letter-spacing: 1px;
		img{position: absolute; left: 5rpx; height: 45rpx; z-index: -1;}
	}
	.content{ padding: 0 25rpx; height: calc(100% - 350rpx - 45rpx - 130rpx); overflow-y: auto;
		.contentList{ margin-top: 50rpx; padding: 0 20rpx;
			.contentListTop{display: flex; align-items: center; margin-bottom: 20rpx;
				.contentListtitle{
					width: calc(100% - 120rpx);
					font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
					font-weight: 650;
					font-size: 40rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.contentListstate{width: 120rpx;
					span{padding: 5rpx 15rpx; color: #ffffff; border-radius: 10rpx;}
				}
			}
			.contentListTime{
				font-size: 28rpx;
				color: #959CA6;
			}
		}
	}
	.showDialog{position: fixed; top: 0; width: 100%; height: 100%; z-index: 9999;
		.boxWc{position: relative; width: 100%; height: 100%;
			.notification{display: flex; align-items: center; justify-content: center; flex-flow: column; position: absolute; left: 30rpx; top: calc(50% - 225rpx); height: 450rpx; width: calc(100% - 60rpx); background: #ffffff; border-radius: 15rpx; box-shadow:2px 2px 5px rgba(0, 0, 0, 0.349019607843137);
				.notificationText{font-size: 40rpx;}
				.notificationBut{ margin-top: 120rpx;
					span{padding: 30rpx 100rpx; border-radius: 15rpx; color: #ffffff; font-size: 35rpx; background: linear-gradient(90deg, rgba(23, 72, 244, 1) 0%, rgba(46, 127, 243, 1) 100%);}
				}
			}
		}
	}
</style>